<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../common/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/index.css">
    <script type="text/javascript" src="../jsplug/jquery.js"></script>
    <script type="text/javascript" src="../jsplug/echarts.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</head>
<script type="text/javascript">
    $('#document').ready(function () {
      getEcharts();
    })
</script>
<body>

<ul class="layui-nav">
    <div class="admin-logo-box">
        <a class="logo" href="#">
            <img src="../../common/images/logo1.png" alt="" width="50%" height="70%">
        </a>
    </div>
    <div class="leftNav">
        <li class="layui-nav-item">
            <a href="index.html">首页</a>
        </li>
        <li class="layui-nav-item">
            <a href="securityTab.html">安全分析</a>
            <dl class="layui-nav-child">
                <dd><a href="securityTab.html">可视化</a></dd>
                <dd><a href="securityAna.html">攻击事件</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="TrafficAna.html">流量分析</a>
        </li>
        <li class="layui-nav-item">
            <a href="fileLoad.html">日志管理</a>
            <dl class="layui-nav-child">
                <dd><a href="fileLoad.html">上传日志</a></dd>
                <dd><a href="javascript:;">配置管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="../../common/images/user.jpg" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="../../login.html">退出系统</a></dd>
            </dl>
        </li>
    </div>
</ul>
<div style="margin-top: 15px;">

    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>
<div class="main">
    <div class="left">
        <div class="access_src">
            <h4>Top10访问来源</h4>
            <div id="accessSource" style="width: 600px;height: 300px;"></div>
        </div>
        <div class="day-attack-statics">
            <div id="day-attack-charts" style="width: 600px;height: 300px;"></div>
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('day-attack-charts'));

                option = {
                    title:{
                        text:'当日攻击事件数量及比例'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        data:['病毒攻击','异常流量','扫描攻击','DDoS攻击','其他']
                    },
                    series: [
                        {
                            name:'攻击类型',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '25',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:23, name:'病毒攻击'},
                                {value:22, name:'异常流量'},
                                {value:35, name:'扫描攻击'},
                                {value:20, name:'DDoS攻击'},
                                {value:30,name:'其他'}
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            </script>
        </div>
    </div>
    <div class="right">
        <div class="month-io-flow">
            <div class="io-flow-chart" id="io-flow" style="width: 600px;height:300px;"></div>
            <script type="text/javascript">
                var myCharts = echarts.init(document.getElementById('io-flow'));
                option = {
                    title: {
                        text: '本月出入防火墙流量图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['出','入']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1号','6号','12号','18号','24号','30号']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'出',
                            type:'line',
                            stack: '总量',
                            data:[120, 132, 101, 134, 90, 230]
                        },
                        {
                            name:'入',
                            type:'line',
                            stack: '总量',
                            data:[220, 182, 191, 234, 290, 330,]
                        },

                    ]
                };
                myCharts.setOption(option);
            </script>
        </div></div>
        <div class="eventTable" style="width: 45%">
            <h4>最新攻击事件</h4>
            <table class="layui-table" id = "test">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>IP</th>
                    <th>攻击类型</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2018-01-31 02:06:31</td>
                    <td>2018-01-31 02:06:31</td>
                    <td>172.31.21.13</td>
                    <td>DDos攻击</td>
                </tr>
                <tr>
                    <td>2018-01-31 02:06:31</td>
                    <td>2018-01-31 02:06:31</td>
                    <td>172.31.21.196</td>
                    <td>端口扫描</td>
                </tr>
                <tr>
                    <td>2018-01-31 02:06:31</td>
                    <td>2018-01-31 02:06:31</td>
                    <td>172.31.21.196</td>
                    <td>端口扫描</td>
                </tr>
                <tr>
                    <td>2018-01-31 02:06:31</td>
                    <td>2018-01-31 02:06:31</td>
                    <td>172.31.21.196</td>
                    <td>端口扫描</td>
                </tr>
                </tbody>
            </table>
        </div>
</div>
<!--<div class="layui-footer">© JamesZhan-Lab514 版权所有</div>-->
<script src="../../common/layui/layui.js" charset="utf-8"></script>
<script>
//    导航栏需要加载element
    layui.use(['element','table'], function(){
        var element = layui.element,table = layui.table; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
        // 表单
//        table.render({
//            elem:'#test'
//            ,url:'/demo/table/user/'
//            ,cols:[
//                {field:'id',width:80,title:'ID',sort:true}
//            ],page:true
//        });
    });
</script>
</body>
</html>